﻿@{
    Layout = null;
}

<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>Demo</title>
    @Scripts.Render("~/easyui-super/js")
    @Styles.Render("~/easyui-super/css")

    <link href="~/Content/Site.css" rel="stylesheet" />
    <script src="~/Scripts/FormExt.js"></script>
    <style type="text/css">
        #index {
            padding: 15px;
            display: flex;
            justify-content: space-between;
            flex-wrap: wrap;
            opacity: 0;
            font-size: 12px;
        }

            #index .demoIndex {
                margin-right: 15px;
            }

                #index .demoIndex:last-child {
                    margin-right: 0;
                }

            #index fieldset {
                padding: 15px;
                border: 1px solid #ccc;
            }

            #index legend {
                padding: 0 10px;
            }

            #index fieldset h3 {
                margin: 10px 0;
            }

        .index-l {
            padding: 10px;
            width: 48%;
            overflow: auto;
        }

        .form-item {
            margin-bottom: 10px;
            width: 50%;
            float: left;
        }

            .form-item > label {
                min-width: 72px;
                display: inline-block;
            }

            .form-item input,
            select {
                width: 170px;
            }

        .contentWrapper {
            padding: 10px;
        }
    </style>
</head>
<body>
    <div id="index" class="easyui-panel" data-options="fit:true,border:false">
        <div style="position:relative;z-index:9999; width: 100%;padding-top:5px;">
            <form id="form1">
                <div>
                    <label for="" class="label-top">客户电话：</label>
                    <input id="txt_TheCall" name="SES_TheCall" class="easyui-textbox" prompt="请输入客户电话号码" />
                    <label for="" class="label-top">单据号：</label>
                    <input class="easyui-textbox" name="SES_TelServiceCode" prompt="请输入单据号" />
                    <input style="width:170px" name="SEGT_SubmitTime" value="@DateTime.Now.ToString("yyyy-MM-dd 00:00:00")" type="text" class="easyui-datetimebox" />-
                    <input style="width:170px" name="SELT_SubmitTime" value="@DateTime.Now.ToString("yyyy-MM-dd 23:59:59")" type="text" class="easyui-datetimebox" />
                    <a href="javascript:serchData()" class="easyui-linkbutton danger">搜 索</a>
                    <a href="javascript: test()" class="easyui-linkbutton danger" id="btn-SearchMore">高级搜索</a>
                </div>
                <div style="position: relative;padding-top:5px;">
                    <div class="search-More">
                        <label for="" class="label-top">客户电话：</label>
                        <input id="txt_TheCall" name="SES_TheCall" style="width:170px" class="easyui-textbox" prompt="请输入客户电话号码" />

                        <div class="footer">
                            <input type="button" value="搜索" class="e8_btn_submit" onclick="onBtnSearchClick()">
                            <span class="e8_sep_line">|</span>
                            <input type="button" value="重置" class="e8_btn_cancel" id="btn-reset">
                            <span class="e8_sep_line">|</span>
                            <input type="button" value="取消" class="e8_btn_cancel" id="btn-cancel">
                        </div>

                    </div>
                </div>

            </form>
        </div>


        <!--表格-->
        <div class="index-l">
            <table id="dg"></table>
        </div>
        <!--表单-->
        <div class="index-l">
            <div id="p" class="easyui-panel" title="panel"
                 data-options="iconCls:'fa fa-tags',closable:true,collapsible:true,minimizable:true,maximizable:true">
                <div class="contentWrapper">
                    <form id="ff" method="post">
                        <div class="form-item">
                            <label for="" class="label-top">用户名：</label>
                            <input id="username" class="easyui-validatebox easyui-textbox" prompt="请输入用户名"
                                   data-options="required:true,validType:'length[3,10]'">
                        </div>
                        <div class="form-item">
                            <label for="" class="label-top">文本输入框：</label>
                            <input class="easyui-textbox" data-options="iconCls:'fa fa-user',iconAlign:'left'"
                                   prompt="请输入文本">
                        </div>
                        <div class="form-item">
                            <label for="" class="label-top">密码输入框：</label>
                            <input class="easyui-passwordbox" prompt="Password" iconwidth="28">
                        </div>
                        <div class="form-item">
                            <label for="" class="label-top">下拉框：</label>
                            <select id="ec" class="easyui-combobox" data-options="editable:false,panelHeight:null"
                                    name="dept">
                                <option value="aa">选项1</option>
                                <option>选项2</option>
                                <option>伤害</option>
                                <option>电风扇</option>
                                <option>共担风险</option>
                            </select>
                        </div>
                        <div class="form-item">
                            <label for="" class="label-top">数值输入框：</label>
                            <input type="text" class="easyui-numberbox" value="100" data-options="min:0,precision:2" />
                        </div>

                        <div class="form-item">
                            <label for="" class="label-top">日历：</label>
                            <input id="dd" type="text" class="easyui-datebox" required="required" />
                        </div>
                        <div class="form-item">
                            <label for="" class="label-top">数字微调：</label>
                            <input id="ss" class="easyui-numberspinner" required="required"
                                   data-options="min:10,max:100,editable:false">
                        </div>
                        <div class="form-item">
                            <label for="" class="label-top">文件选择：</label>
                            <input class="easyui-filebox" data-options="buttonText:'上传头像',buttonIcon:'fa fa-upload'">
                        </div>
                        <div class="form-item">
                            <input class="easyui-slider" value="12" style="width:300px" data-options="showTip:true" />
                        </div>
                    </form>
                </div>
            </div>
        </div>
        <!--按钮-->
        <div class="index-l">
            <a href="#" title="This is the tooltip message." class="easyui-tooltip"
               data-options="position:'right'">Hoverme</a>
            <a href="javascript:void(0)" id="mb" class="easyui-menubutton"
               data-options="menu:'#mm',noline:true,iconCls:'fa fa-tags'">Edit</a>
            <div id="mm">
                <div>Undo</div>
                <div>
                    <span>Open</span>
                    <div style="width:150px;">
                        <div><b>Word</b></div>
                        <div>
                            <span>Open</span>
                            <div style="width:150px;">
                                <div><b>Word</b></div>
                                <div>Excel</div>
                                <div>PowerPoint</div>
                            </div>
                        </div>
                        <div>PowerPoint</div>
                    </div>
                </div>
                <div>Cut</div>
                <div>Copy</div>
                <div>Paste</div>
                <div class="menu-sep"></div>
                <div>Delete</div>
                <div>Select All</div>
            </div>
            <a href="javascript:void(0)" class="easyui-linkbutton" data-options="iconCls:'fa fa-tags'">我是按钮</a>
            <a href="javascript:void(0)" class="easyui-linkbutton default">我也是按钮</a>
            <a href="javascript:void(0)" class="easyui-linkbutton primary" data-options="iconCls:'fa fa-area-chart'"></a>
            <a href="javascript:void(0)" class="easyui-linkbutton error" data-options="iconCls:'fa fa-gears'"></a>
            <a href="javascript:void(0)" class="easyui-linkbutton" data-options="disabled:true">禁用按钮</a>
            <a href="javascript:void(0)" class="easyui-linkbutton" data-options="plain:true">简洁按钮</a>

            <h3>开关</h3>
            <input class="easyui-switchbutton" checked>
            <input class="easyui-switchbutton" data-options="onText:'开',offText:'关'">
            <input class="easyui-switchbutton" data-options="disabled:true">
            <a id="myWin-btn" href="javascript:void(0)" class="easyui-linkbutton primary">对话窗口</a>
            <div id="myWin" style="display: none;">对话框窗口内容。</div>
            <a id="myWin-btn2" href="javascript:void(0)" class="easyui-linkbutton info">选择窗口</a>
            <a id="myWin-btn3" href="javascript:void(0)" class="easyui-linkbutton success">警告窗口</a>
            <a id="myWin-btn5" href="javascript:void(0)" class="easyui-linkbutton warning">提示窗口</a>
            <a id="myWin-btn4" href="javascript:void(0)" class="easyui-linkbutton error">显示消息</a>
        </div>
        <!--tab-->
        <div class="index-l">
            <div id="tt" class="easyui-tabs" data-options="tabHeight:31" style="width:100%;height:100px;">
                <div title="Tab1" style="padding:20px;display:none;">
                    tab1
                </div>
                <div title="Tab2" style="overflow:auto;padding:20px;display:none;">
                    tab2
                </div>
                <div title="Tab3" data-options="iconCls:'fa fa-user',closable:true" style="padding:20px;display:none;">
                    tab3
                </div>
            </div>
        </div>
        <!--accordion和树形-->
        <div class="index-l">
            <div id="aa" class="easyui-accordion" style="width:300px;height:200px;">
                <div title="Title1" data-options="iconCls:'fa fa-save',selected:true">
                    <ul id="tree"></ul>
                </div>
                <div title="Title2" data-options="iconCls:'fa fa-tasks'">
                    看我
                </div>
                <div title="Title3" data-options="iconCls:'fa fa-star-half-full'">
                    你在害怕什么
                </div>
            </div>
        </div>

        <!--布局-->
        <div class="index-l">
            <div id="cc" class="easyui-layout" style="width:100%;height:400px;">
                <div data-options="region:'north',title:'North Title',split:true" style="height:100px;"></div>
                <div data-options="region:'south',title:'South Title',split:true" style="height:100px;"></div>
                <div data-options="region:'east',iconCls:'icon-reload',title:'East',split:true"
                     style="width:100px;"></div>
                <div data-options="region:'west',title:'West',split:true" style="width:100px;"></div>
                <div data-options="region:'center',title:'center title'" style="padding:5px;background:#eee;"></div>
            </div>
        </div>


        <!--树形表格-->
        <div class="index-l">
            <table id="ttg" style="width:600px;height:400px"></table>
        </div>
        <div class="index-l">
            <table id="pg" style="width:300px"></table>
        </div>

        <table class="easyui-datagrid" title="Basic DataGrid" style="width:100%;height:50%;"
               data-options="singleSelect:true,collapsible:true,url:'/easyui-super-theme/easyui/demo/datagrid/datagrid_data1.json',method:'get'">
            <thead>
                <tr>
                    <th data-options="field:'itemid',width:80">Item ID</th>
                    <th data-options="field:'productid',width:100">Product</th>
                    <th data-options="field:'listprice',width:80,align:'right'">List Price</th>
                    <th data-options="field:'unitcost',width:80,align:'right'">Unit Cost</th>
                    <th data-options="field:'attr1',width:250">Attribute</th>
                    <th data-options="field:'status',width:60,align:'center'">Status</th>
                </tr>
            </thead>
        </table>
    </div>
    <script type="text/javascript">
        $("#myWin-btn").on('click', function () {
            $('#myWin').window({
                width: 500,
                height: 300,
                modal: true,
                constrain: true,
                toolbar: [{
                    text: '编辑',
                    iconCls: 'fa fa-cubes',
                    handler: function () {
                        alert('edit')
                    }
                }, {
                    text: '帮助',
                    iconCls: 'fa fa-envelope',
                    handler: function () {
                        alert('help')
                    }
                }],
                buttons: [{
                    text: '保存',
                    handler: function () {
                    }
                }, {
                    text: '关闭',
                    handler: function () {
                    }
                }]
            });
        });

        $("#myWin-btn2").on('click', function () {
            $.messager.confirm('确认', '您确认想要删除记录吗？', function (r) {
                if (r) {
                    alert('确认删除');
                }
            });
        });
        $("#myWin-btn3").on('click', function () {
            //error,question,info,warning
            $.messager.alert('警告', '警告消息', 'warning', function () {
                $.messager.alert('警告', '警告消息2', 'error');
            });
        });
        $("#myWin-btn5").on('click', function () {
            $.messager.prompt('提示信息', '请输入姓名：', function (r) {
                if (r) {
                    alert('你的姓名是：' + r);
                }
            });
        });

        $("#myWin-btn4").on('click', function () {
            $.messager.show({
                title: '我的消息',
                msg: '消息将在3秒后关闭。',
                timeout: 3000,
                showType: 'slide'
            });
        });

        $('#dg').datagrid({
            url: '../easyui-super-theme/js/data/datagrid_data.json',
            fit: true,
            pagination: true,
            fitColumns: true,
            height: 400,
            columns: [
                [{
                    field: 'productid',
                    title: 'productid',
                    width: 100,
                    sortable: true
                }, {
                    field: 'productname',
                    title: 'productname',
                    width: 100,
                    sortable: true
                }, {
                    field: 'unitcost',
                    title: 'unitcost',
                    width: 100,
                    align: 'right',
                    sortable: true
                }, {
                    field: 'status',
                    title: 'status',
                    width: 100,
                    align: 'right'
                }, {
                    field: 'listprice',
                    title: 'listprice',
                    width: 100,
                    align: 'right'
                }, {
                    field: 'attr1',
                    title: 'attr1',
                    width: 100,
                    align: 'right'
                }, {
                    field: 'itemid',
                    title: 'itemid',
                    width: 100,
                    align: 'right'
                }]
            ]
        });

        $(function () {
            /*平滑数据*/
            var tree_data2 = [
                { "id": "1", "text": "A" },
                { "id": "11", "text": "A1", "parentId": "1" },
                { "id": "12", "text": "A2", "parentId": "1" },
                { "id": "13", "text": "A3", "parentId": "1" },
                { "id": "2", "text": "B" },
                { "id": "3", "text": "C" }
            ];
            $('#tree').tree({
                //data: tree_data2,
                url: '../easyui-super-theme/js/data/tree_data.json',
                parentField: 'parentId',
                checkbox: true,
                animate: true
            });
            /*树形表格*/
            $('#ttg').treegrid({
                url: '../easyui-super-theme/js/data/tree_grid_data.json',
                idField: 'id',
                treeField: 'name',
                columns: [[{
                    field: 'name',
                    title: 'name'
                }, {
                    field: 'size',
                    title: 'size',
                    width: 100
                }, {
                    field: 'date',
                    title: 'date',
                    width: 100
                }]]
            });
            /*属性表格*/
            $('#pg').propertygrid({
                url: '../easyui-super-theme/js/data/pg_data.json',
                showGroup: true,
                scrollbarSize: 0
            });
        })
    </script>
</body>
</html>
